<!--已审核成绩修改-->

<template>
  <div class="wrapper-container">
    <div
      class="search-container"
      style="display:block;margin:0; justify-content: space-between"
    >
      <div class="search-container-left" style="display: inline-block;">
        <div style="display: flex; align-items: baseline">
          <span style="color: #004ca7; margin-right: 10px; font-weight: bolder"
            >请选择查询方式:</span
          >
          <el-checkbox-group
            :max="1"
            v-model="checkList"
            @change="checkboxChange"
          >
            <el-checkbox label="按时间查询"></el-checkbox>
            <el-checkbox label="按学号查询"></el-checkbox>
            <el-checkbox label="按课程编号查询"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div
        style="
          width: 700px;
          display: flex;
          justify-content: space-between;
          float:right;
          margin-top:-5px
        "
      >
        <span style="color: #004ca7; font-weight: bolder; margin-top: 5px"
          >请输入查询条件:</span
        >
        <div class="box" style="height: 30px">
          <span style="color: #004ca7"> 起始日期 </span>
          <el-date-picker
            type="date"
            v-model="qizhitime"
            placeholder="选择日期"
            prefix-icon="aa"
            clearable
          >
          </el-date-picker>
        </div>
        <div class="box">
          <span style="color: #004ca7"> 截止日期 </span>
          <el-date-picker
            type="date"
            v-model="jiezhitime"
            placeholder="选择日期"
            prefix-icon="aa"
            clearable
          >
          </el-date-picker>
        </div>
        <div class="search-button" style="margin-top: 4px">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span @click="dlqueryscorenum">查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop="name"
          width="200"
          label="学号【姓名】"
          align="center"
        >
        <template slot="header" slot-scope="scope">
            学号
            【姓名】
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.studentid }}</span>
            <span style="margin-left:5px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          prop="prelectcourse"
          label="课程编号课程名称"
          align="center"
        >
          <template slot="header" slot-scope="scope">
            课程编号<br />
            【课程名称】
          </template>
          <template slot-scope="scope">
            <div>{{ scope.row.courseno }}</div>
            <div>{{ scope.row.prelectcourse }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateman" label="修改人" align="center">
        </el-table-column>
        <el-table-column prop="updatetime" label="修改时间" align="center">
        </el-table-column>
        <el-table-column
          prop="checkusualscore"
          label="课下作业成绩"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.checkusualscore }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="checkexperimentscore"
          label="课堂测评成绩"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.checkexperimentscore }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="checkmidtermscore"
          label="期中考试成绩"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.checkmidtermscore }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="issue" label="课终考试成绩" align="center">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.issue }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="naturecourse" label="成绩性质" align="center">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.naturecourse }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="oldmakeupscore" label="补考成绩" align="center">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.oldmakeupscore }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="oldmakeupscore"
          label="二次补考成绩"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.naturecourse === '补考' ? 'red' : '',
              }"
              >{{ scope.row.oldmakeupscore2 }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 50px">
        <el-pagination
          style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="cuurrentPage"
          :page-sizes="[5, 10, 20, 30,50,100,200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length > 0 ? tableData[0].tol : ''"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import tablelist from "@/views/comonents/tablelist";
import ButtonItem from "../../../components/ButtonItem.vue";
import { blqueryid,alquerytime,clqueryscorenum,dlqueryscorenum,queryallstudnetlog } from "@/api/admin1/check";

export default {
  components: {
    tablelist,
    ButtonItem,
  },
  name: "supervisonMain",
  data() {
    return {
      pageNo:1,
      pageSize:5,
      qizhitime: "",
      jiezhitime: "",
      checkList: [],
      config: {
        mergeTarget: "id", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "numName",
          "coursenumCoursename",
          "modifier",
          "modificationTime",
          "updateman", //修改人
          "updatetime", //修改时间
          "studentid", //学号
          "name", //姓名
          "courseno", //课程编号
          "prelectcourse", //课程名称
        ],
      },
      record: 0,
      tableData: [],
      setName: "",
      changeClick:[],
    };
  },
  created() {
    this.mergeRow();
  },
  mounted() {
    this.queryallstudnetlog();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      if(this.checkList.length <= 0){
        this.dlqueryscorenum();
      } else {
        this.checkboxChange();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      if(this.checkList.length <= 0){
        this.dlqueryscorenum();
      } else {
        this.checkboxChange();
      }
    },
    //查询全部已修改数据
    queryallstudnetlog() {
      return new Promise(() => {
        queryallstudnetlog().then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },

    // 右侧按日期查询
    dlqueryscorenum() {
      this.checkList = [];
      return new Promise(() => {
        let qizhitime = {};
        qizhitime = this.qizhitime;
        let jiezhitime = {};
        jiezhitime = this.jiezhitime;
        dlqueryscorenum(qizhitime, jiezhitime,this.pageNo,this.pageSize).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.pageNo = 1
          }
        });
      });
    },

    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    choiceLink(index) {
      this.record = index;
    },
    checkboxChange(e) {
      this.qizhitime = '';
      this.jiezhitime = '';
      if(e.length <= 0){
        this.queryallstudnetlog();
      } else if (e[0] == "按时间查询") {
        return new Promise(() => {
          alquerytime(this.pageNo,this.pageSize).then((res) => {
            this.tableData = res.data.data;
            this.pageNo = 1;
          });
        });
      } else if (e[0] == "按学号查询") {
        return new Promise(() => {
          blqueryid(this.pageNo,this.pageSize).then((res) => {
            this.tableData = res.data.data;
            this.pageNo = 1;
          });
        });
      } else if (e[0] == "按课程编号查询") {
        return new Promise(() => {
          clqueryscorenum(this.pageNo,this.pageSize).then((res) => {
            this.tableData = res.data.data;
            this.pageNo = 1;
          });
        });
      }
    },

    isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    mergeRow() {
      let arr = [].concat(this.tableData);
      // arr.splice(index, 0, Object.assign({}, row))

      this.tableData = this.mergeData(arr);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, tableData, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, tableData, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = tableData.length - 1; i >= 0; i--) {
          let curr = tableData[i],
            prev = tableData[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return tableData;
    },
  },
  computed: {}, //计算属性
};
</script>

<style lang="less" scoped>
@import "../../../styles/supervision.less";
.wrapper-container {
  width: 100%;
  margin: 0 auto;
}

/deep/ .table-container {
  margin-top: 15px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}
/deep/.el-date-editor .el-input__inner {
  height: 30px;
}
/deep/.el-date-editor.el-input {
  width: 140px;
}
/deep/ .el-input--medium {
  width: 140px;
  .el-input__inner {
    height: 28px !important;
    width: 140px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
</style>